<template>
  <div>
    <h4>充值管理</h4>
    <!--    检索部分-->
    <div class="search">
      <CommonForm
        :form="searchForm"
        :formLabel="searchLabel"
        :formConfig="searchConfig"
      >
        <el-button type="primary" icon="el-icon-search"  class="float-btn" @click="searchCommit(searchForm)">检索</el-button>
      </CommonForm>
    </div>
    <!--    表格部分-->
    <div>

      <CommonTable style="height: 400px;"
                   :table-data="tableData"
                   :table-label="tableLabel"
                   :table-config="tableConfig"
                   @sizeChange="getTableData(1, tableConfig.size, {})"
                   @currentPage="getTableData(tableConfig.page, tableConfig.size, {})"
                   v-if="isShowTable"
                   v-loading = "loading"  element-loading-text="拼命加载中"
      >
      </CommonTable>
      <el-empty v-else></el-empty>
    </div>
  </div>
</template>

<script >

import CommonForm from "@/components/common/CommonForm";
import CommonTable from "@/components/common/CommonTable";
import {getRechargeDate} from "@/api/electricity/payInManage";
export default {
  mounted() {
    this.getTableData(1,10);
  },
  data(){
    return {
      // -----------检索部分
      //检索的表单
      searchForm: {
        campusId: "",//校区
        schoolName:"",//学校
        buildingID: "",//楼栋
        roomName: "",//房间
      },
      //检索表单
      searchLabel: [
        {
          model: "schoolCampus",
          type: 'campusCascader',
          label: "学校/校区",
          labelWidth: '85px',
          //可以跨级选择
          props: {checkStrictly: true},
        },
        {
          model: 'buildingID',
          label: '楼栋',
          type: 'buildingSelect',
        },
        {
          model: 'roomName',
          label: '房间',
        },
      ],
      //表单配置
      searchConfig: {
        labelWidth: "40px",
        inline: true,
        labelPosition: "left",
      },
      //---------表格部分
      //表格数据
      loading: true,//表格载入
      isShowTable:false,
      tableData: [{
        //测试数据
        "schoolName":"东莞理工学院城市学院",
        "campusName":"东莞校区",
        "buildingName":"学1",
        "roomNumber":"505",
        "equipmentStatus":"1",
        "rechargeAmount":"200",
        "rechargeTime":"2021.07.23",
        "payPhone":"15038162388",
        "rechargeModel":"1",
        "balance":"200"
      }],
      //表格标签
      tableLabel:[
        {
          prop:"schoolName",
          label:"学校名称"
        },
        {
          prop: "campusName",
          label: "校区名称"
        },
        {
          prop: "buildingName",
          label: "楼栋名称"
        },
        {
          prop: "roomNumber",
          label: "房间号"
        },
        {
          prop: "equipmentStatus",
          type:'equipmentState',
          label: "设备状态"
        },
        {
          prop:'rechargeAmount',
          type: 'money',
          label: "充值金额"
        },
        {
          prop: "rechargeTime",
          label: "充值时间"
        },

        {
          prop: "payPhone",
          label: "充值账户"
        },
        {
          prop: 'rechargeModel',
          label: "充值方式",
          type: 'dualJudgment',
          trueType:'线下支付',
          falseType:'微信支付'
        },
        {
          prop: "balance",
          type: 'money',
          label: "账号余额"
        }

      ],
      //表格配置
      tableConfig:{
        isShowLoading:true,
        //当前页
        page:1,
        total:30,
        //单页条目
        size:10,
        loading:false
      }
    }
  },
  methods:{
    getTableData(page,pageSize,datas){
      getRechargeDate(page,pageSize,datas).then(res=>{
        const  resultData = res.data;
        if (resultData.code == 200){
          this.loading = false
          this.isShowTable = true
          this.tableData = resultData.data.records;
          const dataList = this.tableData.length;
          this.tableConfig.total = resultData.data.total;
          this.$notify({
            message:`成功获取 ${dataList} 条数据`,
            type:'success'
          })
        }else {
          return this.$notify({
            message:resultData.message,
            type:'error'
          })
        }
      }).catch(()=>{
        this.$message.error('网络出错，请稍后重试');
      })
    },
    searchCommit(searchForm) {
      const Data = {};
      if ('schoolCampus'in searchForm){
        let [schoolName,campusId] =searchForm.schoolCampus||[];
        Data.campusId = campusId?campusId:'';
        Data.schoolName = schoolName;
      }
      for (let i in searchForm) {
        //排除空元素；
        if (searchForm[i] !== "") {
          if (i==='schoolCampus'){continue;}
          Data[i] = searchForm[i];
        }
      }
      console.log(Data);
      // if (Object.keys(formName).length===0) {
      //   return this.$notify({
      //     type: 'warning',
      //     message: '查询参数为空'
      //   })
      // }
      getRechargeDate(1,this.tableConfig.size,Data);

    }
  },
  components: {CommonTable, CommonForm}


}
</script>

<style >

</style>

